<script setup lang="ts">
const emit = defineEmits(['change'])

const activeValue = defineModel();

const items = ref(new Set<string>())

const activeItemId = computed(() => `nav-item-${activeValue.value}`) // 新增计算属性

provide('navListContext', {
  activeValue,
  registerItem: (value: string) => items.value.add(value),
  unregisterItem: (value: string) => items.value.delete(value),
  setActive: (value: string) => {
    if (items.value.has(value)) {
      activeValue.value = value;
      emit('change', value);
    }
  }
})
</script>

<template>
<view class="nav-list">
  <scroll-view
    scroll-x="true"
    class="scroll-content"
    :scroll-into-view="activeItemId"
    scroll-with-animation
  >
    <slot></slot>
  </scroll-view>
</view>
</template>
<style lang="scss" scoped>
.nav-list {
  .scroll-content {
    width: 100%; // 确保 scroll-view 宽度为 100%
    white-space: nowrap;
    display: flex;
    align-items: center; // 垂直居中
  }
}

</style>